var HtmlBox;
var HtmlBoxPage = 'HtmlBoxPage';
if(HtmlBox == null){
	HtmlBox = {};
	HtmlBox.htmlBox = null;
	HtmlBox.htmlBoxBody = null;
}

HtmlBox.updatePosition = function() {
	var htmlBox = HtmlBox.htmlBox;
	htmlBox.css('z-index', '3');
	htmlBox.css('position', 'fixed');
	htmlBox.css('top', '0px');
	htmlBox.css('left', '0px');
	htmlBox.css('width', (parseInt($('body').css('width'))+0)+'px');
	htmlBox.css('height', innerHeight+'px');
	htmlBox.css('opacity', .4);
	htmlBox.css('background-color', '#000');
	
	var htmlBoxBody = HtmlBox.htmlBoxBody;
	var xOfseet = (parseInt(htmlBox.css('width'))/100)*2;
	var yOfseet = (parseInt(innerHeight)/100)*4;
	var htmlBoxBodyWidth = (parseInt(htmlBox.css('width')) - 2 * xOfseet);
	var htmlBoxBodyHeight = innerHeight - 2 * yOfseet;
	htmlBoxBody.css('z-index', '4');
	htmlBoxBody.css('position', 'fixed');
	htmlBoxBody.css('left', xOfseet + 'px');
	htmlBoxBody.css('top', yOfseet + 'px');
	htmlBoxBody.css('width', htmlBoxBodyWidth + 'px');
	htmlBoxBody.css('height', htmlBoxBodyHeight + 'px');
	htmlBoxBody.css('background-color', '#fff');
	
	
	var height = (parseInt(innerHeight)/100)*80;
	htmlBoxBody.find('.content').css('height', height+'px')
	htmlBoxBody.find('.content').css('padding', '30px')
	htmlBoxBody.find('.content').css('float', 'left')
	childsWidth = parseInt(HtmlBox.htmlBoxBody.find('.content').css('width'));
	HtmlBox.htmlBoxBody.css('width', (childsWidth + 70) + 'px');
	xOfseet = (parseInt(htmlBox.css('width')) - parseInt(htmlBoxBody.css('width')))/2;
	htmlBoxBody.css('left', xOfseet + 'px');
}
HtmlBox.show = function() {
	if($('body').find('#HtmlBox').length==0){
		$('body').append('<div id="HtmlBox">');
		$('body').append('<div id="HtmlBoxBody">');
		HtmlBox.htmlBoxBody = $('#HtmlBoxBody');
		HtmlBox.htmlBox = $('#HtmlBox');
		HtmlBox.htmlBox.click(HtmlBox.hide);
		$( window ).resize(HtmlBox.updatePosition);
	} else {
		HtmlBox.htmlBox.css('display', 'block')
		HtmlBox.htmlBoxBody.css('display', 'block')
	}
	HtmlBox.updatePosition();
	
}
HtmlBox.hide = function() {
	HtmlBox.htmlBox.css('display', 'none')
	HtmlBox.htmlBoxBody.css('display', 'none')
	if(HtmlBox.callback){
		HtmlBox.callback();
	}
}
HtmlBox.callback;
HtmlBox.open = function(data, callback) {
	HtmlBox.callback = callback;
	console.log("HtmlBox.open")
	HtmlBox.show();
	console.log(data);
	HtmlBox.htmlBoxBody.html(data);
	HtmlBox.updatePosition();
}